<template>
	<div id="Comments">
		<div id="AllComments">
			<x-header :left-options="{showBack: false}" title="全部评论" class="header vux-1px-b">
				<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			</x-header>
			<div class="comment-list">
				<ul>
					<li v-for="(item,index) in threadList">
						<div class="title-bar">
							<img :src="'/los/uploads/thumb/header/' + item.member_id + '_76X76.jpeg'" alt="" class="photo" />
							<img src="../assets/images/tribune/ic_forum_list_v2.png" alt="" class="logo" />
							<div class="desc">
								<div>
									<h2>{{item.member_nickname}}</h2>
								</div>
								<p>{{common.threadTime(item.thread_time)}}</p>
							</div>
							<div class="zan">
								<i @click="AllLevelComment(item.member_nickname,item.thread_id,index)" class="re-icon tribune-comment"></i>
								<span>{{item.thread_vlike}}</span>
								<i @click="AllReplyLike(item.thread_id,index)" class="tribune-icon tribune-praise"></i>
							</div>
						</div>
						<div v-html="item.thread_content" class="content"></div>
						<div class="reply" v-if="item.children && item.children != ''">
							<div v-for="(items,key) in item.children" class="reply-list">
								<!--回复列表-->
								<div @click="AllCheckType(index,items.thread_id,items.member_nickname,items.thread_title,key)">
									<div class="reply-host">
										<img v-if="items.member_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" />
										<img v-else :src="'/los/uploads/thumb/header/' + items.member_id + '_76X76.jpeg'" alt="" />
										<span>{{items.member_nickname}}</span>
									</div>
									<div v-html="items.thread_content" class="reply-content"></div>
								</div>
								<div class="reply-data">
									<p class="timer">{{common.threadTime(items.thread_time)}}</p>
									<div class="zan">
										<span>{{items.thread_vlike}}</span>
										<i @click="AllLevelLike(index,items.thread_id,key)" class="tribune-icon tribune-praise"></i>
									</div>
								</div>
								<div v-for="(son,K) in items.children" class="reply-list">
									<!--回复列表-->
									<div @click="">
										<div class="reply-host">
											<img v-if="son.member_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" />
											<img v-else :src="'/los/uploads/thumb/header/' + son.member_id + '_76X76.jpeg'" alt="" />
											<span>{{son.member_nickname}}--->{{items.member_nickname}}</span>
										</div>
										<div v-html="son.thread_content" class="reply-content"></div>
									</div>
									<div class="reply-data">
										<p class="timer">{{common.threadTime(son.thread_time)}}</p>
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<div id="singleComment">
			<x-header :left-options="{showBack: false}" title="评论列表" class="header vux-1px-b">
				<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			</x-header>
			<div class="comment-list">
				<ul>
					<li>
						<div class="title-bar">
							<img v-if="forum_thread.member_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" class="photo" />
							<img v-else :src="'/los/uploads/thumb/header/' + forum_thread.member_id + '_76X76.jpeg'" alt="" class="photo" />
							<img src="../assets/images/tribune/ic_forum_list_v2.png" alt="" class="logo" />
							<div class="desc">
								<div>
									<h2>{{forum_thread.member_nickname}}</h2>
								</div>
								<p>{{common.threadTime(forum_thread.thread_time)}}</p>
							</div>
							<div class="zan">
								<i class="re-icon tribune-comment"></i>
								<span>{{forum_thread.thread_vlike}}</span>
								<i @click="singleReplyLike(forum_thread.thread_id)" class="tribune-icon tribune-praise"></i>
							</div>
						</div>
						<div v-html="forum_thread.thread_content" class="content"></div>
						<div class="reply">
							<div v-for="(items,key) in threadList" class="reply-list">
								<div @click="singleCheckType(items.thread_id,items.member_nickname,items.thread_title,key)">
									<div class="reply-host">
										<img :src="'/los/uploads/thumb/header/' + items.member_id + '_76X76.jpeg'" alt="" />
										<span>{{items.member_nickname}}</span>
									</div>
									<div v-html="items.thread_content" class="reply-content"></div>
								</div>
								<div class="reply-data">
									<p class="timer">{{common.threadTime(items.thread_time)}}</p>
									<div @click="singleLevelLike(items.thread_id,key)" class="zan">
										<span>{{items.thread_vlike}}</span>
										<i class="tribune-icon tribune-praise"></i>
									</div>
								</div>
								<div v-for="(son,K) in items.children" class="reply-list">
									<!--回复列表-->
									<div>
										<div class="reply-host">
											<img v-if="son.member_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" />
											<img v-else :src="'/los/uploads/thumb/header/' + son.member_id + '_76X76.jpeg'" alt="" />
											<span>{{son.member_nickname}}--->{{items.member_nickname}}</span>
										</div>
										<div v-html="son.thread_content" class="reply-content"></div>
									</div>
									<div class="reply-data">
										<p class="timer">{{common.threadTime(son.thread_time)}}</p>
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="reply-wrap" v-show="replyShow">
			<div>
				<img :src="'/los/uploads/thumb/header/' + member_id + '_76X76.jpeg'" alt="" class="thumb" />
				<x-textarea v-if="athost != ''" v-model="thread_content" :placeholder="athost" @on-change="change" :show-counter="false" :rows="1" autosize id="textarea"></x-textarea>
				<x-textarea v-else v-model="thread_content" @on-change="change" :show-counter="false" :rows="1" autosize id="textarea"></x-textarea>
				<span @click="addReply" class="send">发送</span>
			</div>
		</div>

		<popup v-model="replyAlert" is-transparent>
			<div class="share-wrap">
				<ul>
					<li class="vux-1px-b">
						<p>{{member_nickname}}:{{reply_thread_title}}</p>
					</li>
					<li class="vux-1px-b">
						<p @click="replyBtn(thread_id)">回复</p>
					</li>
					<li @click="threadAccuse(thread_id)">
						<p>举报</p>
					</li>
				</ul>
				<button @click="replyAlert = false ;replyShow = true">取消</button>
			</div>
		</popup>
		<toast v-model="success" type="text" width="3rem">{{msg}}</toast>
		<loading :show="show" text="加载中"></loading>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { XHeader, Popup, Loading, Toast, XTextarea } from 'vux'
	export default {
		data() {
			return {
				replyAlert: false,
				show: false,
				success: false,
				levelBtn: false,
				replyType: false,
				single_type: false,
				replyShow: true,
				reply_thread_title: '',
				member_nickname: '',
				msg: '',
				threadList: [],
				forum_thread: [],
				thread_id: '',
				athost: '',
				thread_content: '',
				_index: '',
				keys: '',
				member_id: ''
			}
		},
		components: {
			XHeader,
			Popup,
			Loading,
			Toast,
			XTextarea
		},
		mounted() {
			this.getSession();
			if(this.$route.query.type == 'all') {
				this.getThreadList();
				$('#singleComment').hide();
			} else {
				this.getThreadDetail();
				$('#AllComments').hide();
			}
		},
		methods: {
			getSession: function() {
				this.member_id = window.sessionStorage.getItem('member_id');
			},
			//获取全部评论列表 
			getThreadList: function() {
				this.thread_id = this.$route.params.thread_id
				this.show = !this.show;
				var parent_id = this.$route.params.thread_id;
				this.$http({
					method: 'GET',
					url: '/los/api/forum/thread_list.json?parent_id=' + parent_id
				}).then((result) => {
					if(result.data.code == 1) {
						this.show = false;
						this.threadList = result.data.data;
					} else {
						this.show = false;
					}
				}).catch((err) => {})
			},

			//获取帖子详情
			getThreadDetail: function() {
				this.show = !this.show;
				this.thread_id = this.$route.params.thread_id
				this.$http({
					method: 'GET',
					url: '/los/api/forum/thread_details.json?thread_id=' + this.thread_id
				}).then((result) => {
					this.forum_thread = result.data.data.forum_thread;
					this.getThreadList();
				}).catch((err) => {

				})
			},
			//点赞
			AllReplyLike: function(thread_id, index) {
				console.log(index);
				var params = {
					thread_id: thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_like.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						if(result.data.data.thread_like.like_state == 1) {
							this.$nextTick(() => {
								this.threadList[index].thread_vlike++;
							})
						} else {
							this.$nextTick(() => {
								this.threadList[index].thread_vlike--;
							})
						}
					}
				}).catch((err) => {

				})
			},
			//评论详情点赞
			singleReplyLike: function(thread_id) {
				var params = {
					thread_id: thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_like.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						if(result.data.data.thread_like.like_state == 1) {
							this.$nextTick(() => {
								this.forum_thread.thread_vlike++;
							})
						} else {
							this.$nextTick(() => {
								this.forum_thread.thread_vlike--;
							})
						}
					}
				}).catch((err) => {

				})
			},
			//全部评论点赞
			AllLevelLike: function(index, thread_id, key) {
				var params = {
					thread_id: thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_like.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						this.threadList[index].children[key].thread_vlike++;
					}
				}).catch((err) => {

				})
			},
			//详情回复中点赞
			singleLevelLike: function(thread_id, key) {
				var params = {
					thread_id: thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_like.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						if(result.data.data.thread_like.like_state == 1) {
							this.threadList[key].thread_vlike++;
						} else {
							this.threadList[key].thread_vlike--;
						}
					}
				}).catch((err) => {

				})
			},

			//全部评论 二级回复评论
			AllLevelComment: function(member_nickname, thread_id, index) {
				this.thread_content = '';
				this.thread_id = thread_id;
				this.athost = '回复@' + member_nickname;
				this.levelBtn = true;
				this._index = index;
			},

			//选择转发 回复  举报 取消
			AllCheckType: function(index, thread_id, member_nickname, thread_title, key) {
				this.thread_content = '';
				this.reply_thread_title = thread_title;
				this.member_nickname = member_nickname;
				this.thread_id = thread_id;
				this.replyAlert = true;
				this.replyShow = false;
				this.replyType = true;
				this.levelBtn = false;
				this._index = index;
				this.keys = key;

			},
			//列表详情
			singleCheckType: function(thread_id, member_nickname, thread_title, key) {
				this.thread_content = '';
				this.reply_thread_title = thread_title;
				this.member_nickname = member_nickname;
				this.thread_id = thread_id;
				this.replyAlert = true;
				this.replyShow = false;
				this.single_type = true;
				this.athost = '@' + member_nickname;
				this.keys = key;
			},

			//全部评论中 列表回复
			addReply: function() {
				var params = {
					parent_id: this.thread_id,
					thread_content: this.thread_content
				}
				if(this.thread_content != '') {
					this.$http({
						method: 'POST',
						url: '/los/api/forum/thread_add.json',
						data: params
					}).then((result) => {
						if(result.data.code == 1) {
							this.success = !this.success;
							this.msg = result.data.msg;
							this.thread_content = '';
							if(this.levelBtn != true && this.replyType != true && this.single_type != true) {
								//一级回复
								console.log('一级回复');
								this.threadList.unshift(result.data.data.forum_thread);
								console.log(this.threadList);
							}
							if(this.levelBtn == true && this.replyType != true && this.single_type != true) {
								//二级回复
								console.log('二级回复');
								this.threadList[this._index].children.unshift(result.data.data.forum_thread);
							}
							if(this.replyType == true && this.levelBtn != true && this.single_type != true) {
								//三级回复
								console.log('三级回复');
								this.threadList[this._index].children[this.keys].children.push(result.data.data.forum_thread);
							}
							if(this.single_type == true && this.levelBtn != true && this.replyType != true) {
								//详情回复
								console.log('详情');
								this.threadList[this.keys].children.push(result.data.data.forum_thread);
							}
						}
					}).catch((err) => {

					})
				}
			},
			//点击举报
			threadAccuse: function(thread_id) {
				var params = {
					thread_id: thread_id
				}
				console.log(params);
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_accuse.json',
					data: params
				}).then((result) => {
					this.success = !this.success;
					this.msg = result.data.msg;
					this.replyAlert = false;
					this.replyShow = true;
				}).catch((err) => {

				})
			},

			replyBtn: function() {
				this.replyShow = !this.replyShow;
				this.replyAlert = !this.replyAlert;
				this.thread_content = ''
			},

			//判断输入框是否有值
			change: function(event) {
				if(event != '') {
					$('.send').css('opacity', '1')
				}
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	#Comments {
		padding-bottom: 1rem;
	}
	
	.header {
		background: #fff;
	}
	
	.comment-list {
		background: #fff;
		padding: 0 0.26rem;
		margin-bottom: 1.5rem;
	}
	
	.comment-list ul li {
		border-bottom: dashed 1px #aaa;
		padding: 0.46rem 0;
	}
	
	.comment-list ul li:last-child {
		border: none;
	}
	
	.comment-list .content {
		margin-left: 1.32rem;
		font-size: 0.37rem;
		color: #222;
		margin-top: 0.45rem;
	}
	
	.comment-list .reply {
		margin-left: 1.32rem;
		margin-top: 0.26rem;
		background: #F4F5F7;
		padding: 0.37rem 0.26rem;
		font-size: 0.32rem;
		color: #222;
	}
	
	.comment-list .reply .reply-list {
		margin-top: 0.13rem;
	}
	
	.comment-list .reply span {
		font-size: 0.32rem;
		color: #666;
	}
	
	.comment-list .reply p {
		color: #4F98EA;
		font-size: 0.32rem;
	}
	
	.comment-list .reply .reply-host {
		overflow: hidden;
	}
	
	.comment-list .reply .reply-host img {
		width: 0.66rem;
		height: 0.66rem;
		border-radius: 50%;
		float: left;
	}
	
	.comment-list .reply .reply-host span {
		height: 0.66rem;
		line-height: 0.66rem;
		margin-left: 0.13rem;
	}
	
	.comment-list .reply .reply-content {
		font-size: 0.32rem;
		color: #222;
		text-indent: 2em;
		margin-left: 0.13rem;
	}
	
	.comment-list .reply .reply-data {
		overflow: hidden;
		height: 0.53rem;
		line-height: 0.53rem;
		margin-top: 0.2rem;
	}
	
	.comment-list .reply .timer {
		float: left;
		font-size: 0.26rem;
		color: #999;
	}
	
	.comment-list .reply .reply-data .zan {
		float: right;
		display: flex;
		align-items: center;
	}
	
	.comment-list .reply .reply-data .zan span {
		margin-right: 0.1rem;
		font-size: 0.32rem;
		color: #666;
	}
	
	.comment-list .title-bar {
		overflow: hidden;
		position: relative;
	}
	
	.comment-list .title-bar .photo {
		float: left;
		width: 1.06rem;
		height: 1.06rem;
		border-radius: 50%;
	}
	
	.comment-list .title-bar .logo {
		position: absolute;
		width: 0.42rem;
		height: 0.42rem;
		left: 0.66rem;
		top: 0.66rem;
	}
	
	.comment-list .title-bar .desc {
		float: left;
		margin-left: 0.26rem;
	}
	
	.comment-list .title-bar .desc>div {
		overflow: hidden;
	}
	
	.comment-list .title-bar .desc h2 {
		font-size: 0.4rem;
		color: #222;
		float: left;
	}
	
	.comment-list .title-bar .desc img {
		float: left;
		width: 0.44rem;
		height: 0.44rem;
		margin-left: 0.1rem;
	}
	
	.comment-list .title-bar .desc p {
		font-size: 0.32rem;
		color: #999;
		line-height: 0.48rem;
	}
	
	.comment-list .title-bar .desc .hot {
		font-size: 0.32rem;
		color: #fff;
		background: #A27979;
		padding: 0.04rem 0.08rem;
		border-radius: 0.02rem;
		margin-left: 0.18rem;
		height: 0.53rem;
		line-height: 0.53rem;
	}
	
	.comment-list .title-bar .flow {
		float: right;
		margin-top: 0.26rem;
		width: 1.28rem;
		height: 0.53rem;
		line-height: 0.53rem;
		background: #eee;
		text-align: center;
		border-radius: 0.26rem;
		font-size: 0.32rem;
		color: #a30000;
	}
	
	.comment-list .title-bar .zan {
		float: right;
		margin-top: 0.26rem;
		text-align: center;
		font-size: 0.32rem;
		color: #999;
		align-items: center;
		display: flex;
	}
	
	.comment-list .title-bar .zan span {
		margin-right: 0.1rem;
	}
	
	.comment-list .title-bar .zan .re-icon {
		margin-right: 0.5rem;
	}
	
	.comment-list .overplus {
		width: 100%;
		text-align: center;
		margin-top: 0.4rem;
	}
	
	.comment-list .overplus span {
		color: #4F98EA;
		font-size: 0.32rem;
	}
	
	.share-wrap {
		width: 95%;
		margin: 0 auto;
	}
	
	.share-wrap ul {
		overflow: hidden;
		background-color: #fff;
		border-radius: 0.21rem;
	}
	
	.share-wrap ul li {
		text-align: center;
		font-size: 0.4rem;
		color: #222;
		width: 100%;
		height: 1.44rem;
		line-height: 1.44rem;
	}
	
	.share-wrap ul li p {
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0 0.9rem;
		overflow: hidden;
	}
	
	.share-wrap ul li img {
		width: 1.33rem;
		height: 1.33rem;
	}
	
	.share-wrap button {
		width: 100%;
		border: none;
		background: #fff;
		height: 1.44rem;
		margin: 0.26rem 0;
		border-radius: 0.21rem;
		font-size: 0.4rem;
		color: #a30000;
	}
	
	.bottom-bar {
		position: fixed;
		bottom: 0;
		height: 1.3rem;
		overflow: hidden;
		width: 100%;
		left: 0;
		background: #fff;
		padding: 0.26rem 0.26rem;
		display: flex;
		align-items: center;
	}
	
	.bottom-bar .thumb {
		float: left;
		width: 0.77rem;
		height: 0.77rem;
		border-radius: 50%;
	}
	
	.bottom-bar .input {
		float: left;
		background: #F4F5F7;
		width: 4.37rem;
		height: 0.9rem;
		line-height: 0.9rem;
		margin-left: 0.13rem;
		padding: 0 0.37rem;
		border-radius: 0.05rem;
		color: #999;
		font-size: 0.32rem;
	}
	
	.bottom-bar .browse-data {
		overflow: hidden;
		margin-left: 0.4rem;
		height: 0.9rem;
		line-height: 0.9rem;
		display: flex;
		width: 40%;
		align-items: center;
	}
	
	.bottom-bar .browse-data li {
		flex: 1;
		height: 0.9rem;
		line-height: 0.9rem;
		float: left;
		display: flex;
		align-items: center;
		text-align: center;
		margin-right: 0.26rem;
	}
	
	.bottom-bar .browse-data li span {
		font-size: 0.32rem;
		color: #666;
		display: inline-block;
		margin-left: 0.06rem;
	}
	
	.bottom-bar .browse-data li:last-child {
		margin-right: 0;
	}
	
	.reply-wrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background: #fff;
		padding: 0.26rem;
		z-index: 999;
		/*border-top: solid 3px red;*/
	}
	
	.reply-wrap>div {
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.reply-wrap>div img {
		position: fixed;
		bottom: 0.26rem;
		left: 0.26rem;
		width: 0.77rem;
		height: 0.77rem;
		border-radius: 50%;
	}
	
	.reply-wrap>div #textarea {
		margin-left: 0.9rem;
		width: 78%;
		background: #F4F5F7;
		resize: none;
		float: left;
		border-radius: 0.05rem;
		font-size: 0.32rem;
		color: #222;
		height: auto!important;
	}
	
	.reply-wrap>div .send {
		display: inline-block;
		color: #a30000;
		opacity: .7;
		font-size: 0.4rem;
		position: fixed;
		right: 0.26rem;
		bottom: 0.4rem;
	}
	
	.share-wrap>.reply {
		overflow: hidden;
		background-color: #fff;
		border-radius: 0.21rem;
		padding: 0 0.26rem;
	}
	
	.share-wrap>.reply li {
		text-align: center;
		font-size: 0.4rem;
		color: #222;
		width: 100%;
		height: 1.44rem;
		justify-content: center;
		align-items: center;
		display: flex;
	}
</style>
<style>
	#Comments .weui-cell {
		padding: 0!important;
	}
	
	#Comments .weui-textarea {
		background: #F4F5F7!important;
		padding: 0.26rem;
		height: 0.9rem;
	}
	
	#Comments .weui-cell:before {
		border: none;
	}
</style>